import QtQuick 2.12

Item {
    id: root
    property string title: ""
    property int editWidth: 180
    property int textWidth: title==="" ? 0 : 80

    property bool required: false

    property bool editable: true
    property string inputText: ""
    property string prompt: ""
    property bool promptVisible: inputText === "" ? true : false
    property var inputEchoModel: TextInput.Normal
    property var inputMaxLength: 100

    property bool intflag: false
    property bool douflag: false
    property bool ipflag: false

    property int fontsize: 17


    function getText(){
        return textinput.text
    }
    function setText(text){
        textinput.text = text
    }



    signal textChanged()

    onVisibleChanged: {
        if(!visible){
            textinput.focus = false
        }
    }

    width: textWidth + editWidth
    height: 40

    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    Rectangle{
        id: rectInput
        radius: 3
        height: parent.height
        width: editWidth
        x: textWidth
        border.color: "#CCCCCC"
        TextInput{
            id: textinput
            width: parent.width
            height: parent.height
            anchors.fill: parent
            font.pixelSize: fontsize
            verticalAlignment: TextInput.AlignVCenter
            anchors.leftMargin: 10
            text: inputText
            echoMode: inputEchoModel
            maximumLength: inputMaxLength
            validator: RegExpValidator {
                regExp: intflag? /^[-+]?\d+/ :douflag? /[0-9]*(\.[0-9]+)?/ :ipflag? /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/: /.*/
            }
            onTextChanged: {
                if(text === ""){
                    promptVisible = true
                }else{
                    promptVisible = false
                }
                root.textChanged()
            }
            selectByMouse: true //设置为可以被鼠标选中
        }
        clip: true
    }
    Text{
        text: prompt
        visible: promptVisible
        font.pixelSize: fontsize
        anchors.verticalCenter: root.verticalCenter
        x: textWidth + 10
        color: "#DDDDDD"
    }

    Item{
        height: parent.height
        width: 10
        Text{
            text: "*"
            x: -10
            color: "red"
            font.pixelSize: fontsize
            anchors.verticalCenter: parent.verticalCenter
        }
        visible: required
    }
    Rectangle{
        color: "#EEEEEE"
        opacity: 0.5
        visible:  ! editable
        anchors.fill: rectInput
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
    }

}
